<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式示例页面</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .header {
            max-width: 1440px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #f8f8f8;
            border-bottom: 1px solid #ddd;
        }
        .header .logo {
            font-size: 24px;
            font-weight: bold;
        }
        .header .menu {
            display: flex;
            gap: 20px;
            margin-right: auto; /* 菜单靠左 */
            margin-left: 20px; /* 菜单与LOGO的间距 */
        }
        .header .search-box {
            display: flex;
        }
        .header .search-box input {
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .header .search-box button {
            padding: 5px 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            margin-left: 5px;
            cursor: pointer;
        }
        .main-content {
            max-width: 1440px;
            margin: 0 auto;
            display: flex;
            padding: 20px;
        }
        .main-content .sidebar {
            width: 200px;
            background-color: #f4f4f4;
            padding: 10px;
            border-right: 1px solid #ddd;
        }
        .main-content .content {
            flex: 1;
            padding: 10px;
        }
        .footer {
            max-width: 1440px;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            background-color: #f8f8f8;
            border-top: 1px solid #ddd;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                align-items: flex-start;
                padding: 10px;
            }
            .header .menu {
                flex-direction: column;
                gap: 10px;
                margin: 10px 0; /* 调整菜单间距 */
                margin-left: 0; /* 移除左侧间距 */
            }
            .header .search-box {
                width: 100%;
                margin-top: 10px;
            }
            .header .search-box input {
                flex: 1;
            }
            .main-content {
                flex-direction: column;
                padding: 10px;
            }
            .main-content .sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid #ddd;
                margin-bottom: 20px;
            }
            .main-content .content {
                padding: 0;
            }
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="logo">LOGO</div>
        <div class="menu">
            <a href="#">首页</a>
            <a href="#">关于我们</a>
            <a href="#">服务</a>
            <a href="#">联系我们</a>
        </div>
        <div class="search-box">
            <input type="text" placeholder="搜索...">
            <button>搜索</button>
        </div>
    </div>

    <!-- 中间内容 -->
    <div class="main-content">
        <div class="sidebar">
            <h3>分类</h3>
            <ul>
                <li><a href="#">分类1</a></li>
                <li><a href="#">分类2</a></li>
                <li><a href="#">分类3</a></li>
                <li><a href="#">分类4</a></li>
            </ul>
        </div>
        <div class="content">
            <h1>主要内容</h1>
            <p>这里是页面的主要内容区域。</p>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <p>版权所有 &copy; 2023 公司名称. 保留所有权利。</p>
        <p>底部说明文字</p>
    </div>
</body>
</html>